<template>
  <div class="mechanismregAdd">
    <div class="container">
      <div class="container-main">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
          <Row >
            <!-- 基本信息 -->
            <Col span="24" class="left-part">
              <div class="title">基本信息</div>
              <Row>
                <Col span="8">
                  <!-- 药企名称 -->
                  <div class="address hongdian">
                    <div class="left">
                      <span style="color:red;">*</span>
                      <span>药企名称：</span>
                    </div>
                    <FormItem class="right" prop="orgName">
                      <Input v-if="notReview" v-model.trim="formValidate.orgName" clearable></Input>
                      <div style="height:35px" v-else>{{formValidate.orgName}}</div>
                    </FormItem>
                  </div>
                  <!-- 药企编码 -->
                  <div class="address hongdian">
                    <div class="left">
                      <span style="color:red;">*</span>
                      <span>药企编码：</span>
                    </div>
                    <FormItem class="right" prop="orgCode">
                      <Input v-if="notReview" v-model.trim="formValidate.orgCode" :disabled="mode === 'edit'"
                        :clearable="mode != 'edit'"/>
                      <div style="height:35px" v-else>{{formValidate.orgCode}}</div>
                    </FormItem>
                  </div>
                  <!-- 企业法人 -->
                  <div class="address">
                    <div class="left">
                      <span>企业法人：</span>
                    </div>
                    <FormItem class="right">
                      <Input
                        v-if="notReview"
                        v-model.trim="formValidate.legalPerson"
                        placeholder
                        clearable
                        style="100%"
                      ></Input>
                      <div style="height:35px" v-else>{{formValidate.legalPerson}}</div>
                    </FormItem>
                  </div>
                  <!-- 联系人 -->
                  <div class="address hongdian">
                    <div class="left">
                      <span style="color:red;">*</span>
                      <span>联系人：</span>
                    </div>
                    <FormItem class="right" prop="linkman">
                      <Input
                        v-if="notReview"
                        v-model.trim="formValidate.linkman"
                        placeholder
                        clearable
                        style="margin-right:10px"
                      />
                      <div style="height:35px" v-else>{{formValidate.linkman}}</div>
                    </FormItem>
                  </div>
                </Col>
                <Col span="15">
                  <!-- 机构地址 -->
                  <div class="region hongdian">
                    <div class="left">
                      <span style="color:red;">*</span>
                      <span>药企地址：</span>
                    </div>
                    <div class="right" v-if="notReview" style="flex: 1 1 auto; ">
                      <Row>
                        <Col span="24">
                        <div style="display:flex">
                          <FormItem prop="districtCode" :rules="genAddressRule(formValidate)" style="width: 50%">
                            <newfourLevelLinkage
                              v-if="notReview"
                              @changeProvince="changeProvince"
                              @changeCity="changeCity"
                              @changeArea="changeArea"
                              :province="Number(formValidate.provinceCode)"
                              :city="Number(formValidate.cityCode)"
                              :area="Number(formValidate.districtCode)"
                            ></newfourLevelLinkage>
                          </FormItem>           
                          <FormItem prop="hosAddr" style="width: 50%">
                            <Input
                              v-if="notReview"
                              v-model.trim="formValidate.hosAddr"
                              placeholder="请输入详细地址"
                              clearable maxlength="50"
                            ></Input>
                          </FormItem>                 
                        </div>
                          
                        </Col>
                      </Row>
                    </div>
                    <div class="right" v-if="!notReview">
                      <Row>
                        <Col span="23"> 
                          <FormItem prop="hosAddr" :rules="genAddressRule(formValidate)"> 
                            <div style="height:35px" class="content">
                              <span>{{($store.getters.getProvinceList.filter(item => item.id == formValidate.provinceCode)[0] || {}).name}}
                              {{($store.getters.getCityList(formValidate.provinceCode).filter(item => item.id == formValidate.cityCode)[0] || {}).name}}
                              {{($store.getters.getAreaList(formValidate.cityCode).filter(item => item.id == formValidate.districtCode)[0] || {}).name}}
                              {{(formValidate.hosAddr || {})}}</span>
                            </div>
                          </FormItem>   
                        </Col>
                        <!-- <Col span="14"> 
                          <FormItem prop="hosAddr">
                            <div style="magrin-left:-200px;height:35px" v-if="!notReview">{{formValidate.hosAddr}}</div>
                          </FormItem>
                        </Col> -->
                      </Row>
                    </div>
                  </div>
                  <!-- 交通路线 -->
                  <div class="address">
                    <div class="left">
                      <span>交通路线：</span>
                    </div>
                    <FormItem class="right">
                      <Input
                        v-if="notReview"
                        v-model.trim="formValidate.route"
                        placeholder
                        clearable
                        style="100%"
                      ></Input>
                      <div style="height:35px" v-else>{{formValidate.route}}</div>
                    </FormItem>
                  </div>
                </Col>
                <Col span="8">
                  <!-- 法人身份证号码 -->
                    <div class="address">
                      <div class="left">
                        <span>法人身份证号码：</span>
                      </div>
                      <FormItem class="right">
                        <Input
                          v-if="notReview"
                          v-model.trim="formValidate.legalPersonCard"
                          placeholder
                          clearable
                          style="100%"
                        ></Input>
                        <div style="height:35px" v-else>{{formValidate.legalPersonCard}}</div>
                      </FormItem>
                    </div>
                    <!-- 联系电话 -->
                    <div class="address hongdian">
                      <div class="left" style="width: 80px">
                        <span style="color:red;">*</span>
                        <span>联系电话：</span>
                      </div>
                      <FormItem class="right" prop="linkmanTelephone">
                        <Input
                          v-if="notReview"
                          v-model.trim="formValidate.linkmanTelephone"
                          maxlength = '25'
                          placeholder
                          clearable
                        />
                        <div style="height:35px" v-else>{{formValidate.linkmanTelephone}}</div>
                      </FormItem>
                    </div>
                </Col>
                <Col span="7">
                  <!-- 经营范围 -->
                  <div class="address">
                    <div class="left">
                      <span>经营范围：</span>
                    </div>
                    <FormItem class="right" prop="businessScope">
                      <Input
                        v-if="notReview"
                        v-model.trim="formValidate.businessScope"
                        type="textarea"
                        :rows="4"
                        style="height: 88px;"
                      />
                      <div v-else>{{formValidate.businessScope}}</div>
                    </FormItem>
                  </div>
                </Col>
              </Row>
            </Col>
            <!-- 资质信息 -->  
            <Col span="24" class="right-part">
              <div class="title">资质信息
                <span style="color: #FF9966;fontSize: 14px;marginLeft:35px;margin-bottom: 10px">(注意:图片只能上传jpg格式，且文件大小不超过200KB)</span>
              </div>
              <Row>
                <Col span="7">                  
                  <!-- 营业执照编号 -->
                  <Row >
                    <Col span="24">
                      <div class="address hongdian">
                        <div class="left">
                          <span style="color:red;">*</span>
                          <span>营业执照编号：</span>
                        </div>
                        <FormItem prop="certListMap.0.code"  :rules="{required: true, message: '请输入医疗机构执业许可证登记号'}">
                          <Input v-if="notReview" v-model.trim="getItemByType('1').code"></Input>
                          <div v-else class="code" style="height:35px">{{getItemByType('1').code}}</div>
                        </FormItem>
                      </div>
                    </Col>
                    <Col span="24">
                    <div style="height:100px;">
                      <imgUploadAndReview ref="upload1" v-model="uploadList1" :mode="mode" />
                    </div>
                      
                    </Col>
                  </Row >      
                  <Row >
                    <Col span="24">  
                      <!-- 执业药师证编号 -->
                      <div class="address hongdian">
                        <div class="left">
                          <span style="color:red;">*</span>

                          <span>执业药师证编号：</span>
                        </div>
                        <FormItem prop="certListMap.3.code"  :rules="{required: true, message: '请输入执业药师证编号'}">
                          <Input v-if="notReview" v-model.trim="getItemByType('4').code"></Input>
                          <div v-else class="code" style="height:35px">{{getItemByType('4').code}}</div>
                        </FormItem>                       
                      </div>
                    </Col>
                    <Col span="24"> 
                      <div style="height:100px;"> 
                        <imgUploadAndReview ref="upload4" v-model="uploadList4" :mode="mode"/>  
                      </div>
                       
                    </Col>
                  </Row >
                </Col> 
                <Col span="8">
                  <Row >
                    <Col span="24">
                      <!-- 药品经营许可证号 -->
                      <div class="address hongdian">
                        <div class="left">
                          <span style="color:red;">*</span>

                          <span>药品经营许可证号：</span>
                        </div>
                        <FormItem prop="certListMap.1.code"  :rules="{required: true, message: '请输入药品经营许可证号'}">
                          <Input v-if="notReview" v-model.trim="getItemByType('2').code"></Input>
                          <div v-else class="code" style="height:35px">{{getItemByType('2').code}}</div>
                        </FormItem>
                        
                      </div>
                    </Col> 
                    <Col span="24">
                      <div style="height:100px;"> 
                        <imgUploadAndReview ref="upload2" v-model="uploadList2" :mode="mode"/> 
                      </div>
                      
                    </Col> 
                  </Row >
                  <Row >
                    <Col span="24">
                      <!-- 医疗器械经营许可证号 -->
                      <div class="address">
                        <div class="left">
                          <span>医疗器械经营许可证号：</span>
                        </div>
                        <FormItem prop="businesslicense">
                          <Input v-if="notReview" v-model.trim="getItemByType('5').code"></Input>
                          <div v-else class="code" style="height:35px">{{getItemByType('5').code}}</div>
                        </FormItem>
                      </div>
                    </Col> 
                    <Col span="24">
                      <div style="height:100px;">  
                        <imgUploadAndReview ref="upload5" v-model="uploadList5" :mode="mode"/>
                      </div>
                      
                    </Col> 
                  </Row >
                </Col>
                <Col span="9">
                  <!-- 药品经营质量管理规范认证证书编号-->
                  <Row >
                    <Col span="24">                      
                      <div class="address hongdian">
                        <div class="left">
                          <span style="color:red;">*</span>

                          <span>药品经营质量管理规范认证证书编号：</span>
                        </div>
                        <FormItem prop="certListMap.2.code"  :rules="{required: true, message: '请输入药品经营质量管理规范认证证书编号'}">
                          <Input v-if="notReview" v-model.trim="getItemByType('3').code"></Input>
                          <div v-else class="code" style="height:35px;">{{getItemByType('3').code}}</div>
                        </FormItem>
                        
                      </div>
                    </Col> 
                    <Col span="24">
                      <div style="height:100px;">  
                        <imgUploadAndReview ref="upload3" v-model="uploadList3" :mode="mode"/>
                      </div>
                      
                    </Col> 
                  </Row >
                  <!-- 卫生许可证编号 -->
                  <Row >
                    <Col span="24">
                      <div class="address">
                        <div class="left">
                          <span>卫生许可证编号：</span>
                        </div>
                        <FormItem prop="hygienelicense">
                          <Input v-if="notReview" v-model.trim="getItemByType('6').code"></Input>
                          <div v-else class="code" style="height:35px">{{getItemByType('6').code}}</div>
                        </FormItem>                       
                      </div>
                    </Col> 
                    <Col span="24">  
                      <div style="height:100px;">                 
                        <imgUploadAndReview ref="upload6" v-model="uploadList6" :mode="mode" />
                      </div>
                    </Col> 
                  </Row >
                </Col>
              </Row >
            </Col>
            <!-- 药企简介 -->
            <Col span="23" class="left-part">
              <div class="title">药企简介</div>
              <div class="address" style="margin-left:5px">
                <FormItem class="right" style="width:100%;" prop="introduce">
                  <vueEditor
                    v-if="notReview"
                    id="homeInfo"
                    :textHtml="formValidate.hosIntroduction"
                    :urlCode="urlCode"
                    @valueHandle="afterChange"                     
                    style="width:98%;margin:0 10px"
                  ></vueEditor>
                  <div style="min-height:35px" v-else v-html="formValidate.hosIntroduction"></div>
                </FormItem>
              </div>
            </Col>
          </Row>
        </Form>
        <div class="button-bottom">
          <Button v-if="mode !== 'review'" type="primary" :disabled="disabled" @click="handleSubmit('formValidate')" style="width: 75px;height:35px">
            <Icon type="ios-checkmark" style="margin-right:5px;" size="16" />保存
          </Button>
          <Button @click="handleBack" style="width: 75px;height:35px;margin-left:30px">
            <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
          </Button>
        </div>
      </div>
    </div>
    <Modal title="预览图片" width="30" v-model="viewModal" footer-hide>
      <div>
        <img :src="viewSrc" style="width: 100%" />
      </div>
    </Modal>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import address from "@/configs/address";
import cookie from "@/utils/cookie.js";
import code from "@/configs/base.js";
import vueEditor from "@/components/vueEditor";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
import imgUploadAndReview from "@/components/imgUploadAndReview";
export default {
  components: {
    newfourLevelLinkage,
    imgUploadAndReview,
    vueEditor
  },
  props: {
    mode: String
  },
  created() {
    this.province = this.$route.query.province
      ? parseInt(this.$route.query.province)
      : null;
    this.city = this.$route.query.city
      ? parseInt(this.$route.query.city)
      : null;
    this.area = this.$route.query.area
      ? parseInt(this.$route.query.area)
      : null;
    this.hospital = this.$route.query.hospital
      ? this.$route.query.hospital
      : null;
      let breadList = [
          { path: "/index", title: "首页" },
          {
              path: "/index/maintain/indexManagement/index",
              title: "索引管理"
          },
          {
              path: "/index/maintain/drugCompanies/list",
              title: "药企信息管理"
          }
      ];
      this.$emit("changeBreadList", breadList);
  },
  data() {
    return {
      urlCode: '{"urlCode":"' + code.urlCode.richText + '"}',
      uploadData: {
        json: '{"urlCode":"' + code.urlCode.userImage + '"}'
      },
      certList: [],
      provList: [],
      cityList: [],
      countyList: [],
      province: null,
      city: null,
      area: null,
      isBack: 2,
      newprovince: "",
      newcity: "",
      newdistrict: "",
      cStatus: true,
      enterpriseList: [],

      formValidate: {
        hospitalType: 3,
        id: null,
        //机构名称
        orgName: "",
        provinceCode: "",
        // 市
        cityCode: "",
        //县
        districtCode: "",
        //详细地址
        hosAddr: "",
        // 药企编码
        orgCode: '',
        //其他许可证
        otherlicence: "",
        //联系人
        linkman: "",
        //联系人电话
        linkmanTelephone: "",
        //营业时间说明
        legalPerson: "",
        // 经营范围
        businessScope: "",
        //药企简介
        hosIntroduction: "",

        certListMap: [
          {
            type: "1",
            code: "",
            filePath: null
          },
          {
            type: "2",
            code: "",
            filePath: null
          },
          {
            type: "3",
            code: "",
            filePath: null
          },
          {
            type: "4",
            code: "",
            filePath: null
          },
          {
            type: "5",
            code: "",
            filePath: null
          },
          {
            type: "6",
            code: "",
            filePath: null
          },
          {
            type: "7",
            code: "",
            filePath: null
          }
        ]
      },

      ruleValidate: {
        // 城
        provinceCode: [
          {
            required: true,
            message: "请选择省级",
            trigger: "change"
          }
        ],
        // 市
        cityCode: [
          {
            required: true,
            message: "请选择城市",
            trigger: "change"
          }
        ],
        //县
        districtCode: [
          {
            required: true,
            message: "请选择区县",
            trigger: "change"
          }
        ],

        // 药企名称
        orgName: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请输入药企名称",
            // 触发事件
            // trigger: "blur"
            trigger: "change"
          }
        ],
        //详细地址
        hosAddr: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请填写详细的地址",
            // 触发事件
            trigger: "change"
            // trigger: "blur"
          }
        ],
        // 联系人
        linkman: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请输入联系人",
            // 触发事件
            trigger: "change"
            // trigger: "blur"
          }
        ],
        // 联系人电话
        linkmanTelephone: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请输入联系人电话",
            // 触发事件
            trigger: "change"
            // trigger: "blur"
          }
        ],
        orgCode: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请输入药企编码",
            // 触发事件
            trigger: "change"
            // trigger: "blur"
          }
        ],
        licencecode: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请输入营业执照编号",
            // 触发事件
            trigger: "change"
            // trigger: "blur"
          }
        ],
        pharmacistlicence: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请输入执业药师证编号",
            // 触发事件
            trigger: "change"
            // trigger: "blur"
          }
        ],
        businessLicense: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请输入药品经营许可证号",
            // 触发事件
            trigger: "change"
            // trigger: "blur"
          }
        ],
        qualitySpecification: [
          {
            // 是否校验
            required: true,
            // 提示文字
            message: "请输入药品经营质量管理规范认证证书编号",
            // 触发事件
            trigger: "change"
            // trigger: "blur"
          }
        ],
      },

      uploadList1: [],
      uploadList2: [],
      uploadList3: [],
      uploadList4: [],
      uploadList5: [],
      uploadList6: [],
      uploadList7: [],
      disabled: false
    };
  },
  computed: {
    notReview() {
      return this.mode !== 'review';
    }
  },
  mounted() {
    //获取省级信息
    let id = this.$route.query.id;
    this.formValidate.id = id;
    if (this.mode !== 'add') {
      this.$axios
        .post(api.mechanismregSearch, {
          id: id
        })
        .then(res => {
          if (res.data.code) {
            // 利用返回数据填充 前端数据
            const ret = JSON.parse(JSON.stringify(res.data.object));
            //对 ret.certlist 进行 this.formValidate.certListmerge 进行merge 以兼容旧数据;
            if(this.formValidate.certListMap && ret.certList){
              this.formValidate.certListMap.forEach((item, index) => {
                ret.certList[index] = Object.assign({}, item, ret.certList[index] || {})
              });
              // 利用返回数据填充 前端数据
              res.data.object.certList.forEach((item, index) => {
                if (item.filePath) {
                  item.filePath = JSON.parse(item.filePath);
                    if (!Array.isArray(item.filePath)) {
                      item.filePath = [item.filePath];
                    }
                    item.filePath.forEach((item2, index) => {
                      this['uploadList' + item.type].push({
                        status: "finished",
                        url: item2.fileName,
                        res: item2,
                        uid: index
                      });
                    });
                }
              });
              
            }            
            this.formValidate = Object.assign({}, this.formValidate, ret);
            this.formValidate.certListMap = JSON.parse(JSON.stringify(this.formValidate.certList));
            this.formValidate.provinceCode = String(ret.provinceCode);
            this.formValidate.cityCode = String(ret.cityCode);
            this.formValidate.districtCode = String(ret.districtCode);
          }
        });
    }
  },
  methods: {
    // 药企简介
    afterChange(val) {
        this.formValidate.hosIntroduction = val;
    },
    handleBack() {
      this.functionJS.queryNavgationTo(
        this,
        "/index/organizat/pharmaceutical/list",
        {
          pageNo: this.$route.query.pageNo,
          province: this.province,
          city: this.city,
          area: null,
          hospital: this.hospital,
          isBack: 2
        }
      );
    },
    // 文件上传成功触发的函数
    handleSuccess(res, file, type) {
      res = this.uploadFileDecrypt(res);
      if (res.success) {
        file.res = res.object[0];
      } else {
        this.$Message.info("上传失败,请重试");
      }
    },
    preview(type) {
      if (type !== '7') {
        const check = this['uploadList' + type].length < 1;
        if (!check) {
          this.$Message.info("只能上传一张图片");
          return false;
        }
      }
    },
    // 查看预览图片
    handleView(item) {
      this.viewModal = true;
      this.viewSrc = this.fileBaseUrl + item.res.fileName;
    },
    // 上传图片大小错误提醒
    handleMaxSize() {
      this.$Message.error("上传图片大小不能超过200kb");
    },
    // 上传图片格式错误提醒
    uploadFormatError() {
      this.$Message.error("上传图片类型只能是jpg格式");
    },
    // 控制图片上传结束-------------------------------------------------------------------------------------------------------------
    changeProvince(val) {
      this.formValidate.provinceCode = val;
      this.provList = this.$store.getters.getProvinceList
      this.provList.forEach(i =>{
        if (i.id == this.formValidate.provinceCode) {
            this.formValidate.provinceName = i.name
          }
      })
    },
    changeCity(val) {
      this.formValidate.cityCode = val;
      this.cityList = this.$store.getters.getCityList(this.formValidate.provinceCode);
      this.cityList.forEach(i =>{
        if (i.id == this.formValidate.cityCode) {
            this.formValidate.cityName = i.name
          }
      })
    },
    changeArea(val) {
      this.formValidate.districtCode = val;
      this.countyList = this.$store.getters.getAreaList(this.formValidate.cityCode);
      this.countyList.forEach(i =>{
        if (i.id == this.formValidate.districtCode) {
            this.formValidate.districtName = i.name
          }
      })
    },
    genAddressRule(formValidate) {
      const that = this;
      return {
        required: true,
        trigger: "change",
        validator: (rule, value, callback) => {
          if (!formValidate.provinceCode) {
            callback(new Error("请选择省份"));
          } else if (!formValidate.cityCode) {
            callback(new Error("请选择市"));
          } else if (!formValidate.districtCode) {
            callback(new Error("请选择区"));
          } else {
            callback();
          }
        }
      };
    },
    // 提交表单
    handleSubmit(name) {
      this.disabled = true
      this.$refs[name].validate(valid => {
          if (
            this.formValidate.certListMap[0].code &&
            this.formValidate.certListMap[1].code &&
            this.formValidate.certListMap[2].code &&
            this.formValidate.certListMap[3].code
          ) {
            //上传'地址'字段内容填充
            this.formValidate.certListMap.forEach((item, index) => {
              if (item.type == '7') {
                item.filePath = this.uploadList7.map((item) => item.res)
              } else {
                item.filePath = this['uploadList' + item.type].map((item) => item.res)[0]
              }
            })
            let reqUrl = '';
            if (this.mode === 'add') {
              reqUrl = api.mechanismregAdd;
              delete this.formValidate.id;
            } else if (this.mode === 'edit') {
              reqUrl = api.mechanismregEdit
            }
            this.formValidate.hospitalType = 3; //表示是药企;
            this.$refs[name].validate(valid => {
              if (valid) {
                // 必填项填写完成
                this.$axios
                  .post(reqUrl, this.formValidate)
                  .then(res => {
                    if (res.data.code) {
                      let pageNo = this.$route.query.pageNo;
                      this.disabled = false 
                      this.mode === 'add' && this.$Message.success("添加成功");
                      this.mode === 'edit' && this.$Message.success("修改成功");
                      this.handleBack();                 
                    } else {
                      this.disabled = false 
                      this.$Message.info(res.data.message);
                    }
                  })
                  .catch(err => {
                    this.disabled = false
                    this.$Message.error(res.data.err);
                  });
              } else {
                this.disabled = false 
                // 必填项填写失败
                this.$Message.error("请检查必填项是否填写正确!");
              }
            });
        } else {
          this.disabled = false 
          this.$Message.error("请检查必填项是否填写完整!");
        }
      })     
    },
    getItemByType(type) {
      return this.formValidate.certListMap.filter(item => item.type == type)[0]
    }
  },
  watch: {
    formValidate(n) {
      console.log(n);
    }
  }
};
</script>
<style lang='less' scoped>
.mechanismregAdd {
  width: 100%;
  box-sizing: border-box;
  .container {
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .container-main {
      flex-direction: column;
      width: 100%;
      .left-part {
        width: 98%;
        margin: 20px auto;
        margin-left: 1%;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        overflow: hidden;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 20px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;
        }
        .left {
          flex: 0 0 auto;
          // width: 140px;
          text-align: left;
          margin-right: 5px;
        }
        .right {
          width: 94%;
          text-align: left;
        }
      }
      .right-part {
        width: 98%;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        overflow: hidden;
        .code {
          padding-right: 10px;
        }
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 10px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;
        }
        .left {
          flex: 0 0 auto;
          // width: 210px;
          text-align: left;
          margin-right: 10px;
        }
        .upload-part {
          display: flex;
          position: relative;
          align-items: center;
          top: -12px;
          margin-left: 35px;
          .demo-upload-list {
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 4px;
          }
          // 关闭input文本框自动填充背景色黄色
          input:-webkit-autofill {
            box-shadow: 0 0 0px 1000px white inset !important;
          }

          .demo-upload-list img {
            width: 100%;
            height: 100%;
          }
          .demo-upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
          }
          .demo-upload-list:hover .demo-upload-list-cover {
            display: block;
          }
          .demo-upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
        /deep/ .ivu-input {
          width: 200px;
          margin-right: 20px;
        }
      }
      .button-bottom {
        margin: 20px 0;
        text-align: center;
        button {
          width: 100px;
          // height: 50px;
        }
      }
      .ivu-col-offset-6 {
        margin: 0px;
      }
      .region,
      .address {
        display: flex;
        flex-direction: row;
        margin-left: 35px;
        .left {
          font-size: 14px;
          padding-top: 5px;
          span:last-child {
            font-weight: 600;
          }
        }
        input {
          display: inline-block;
          width: 400px;
          border: 1px solid black;
          line-height: 30px;
          outline: none;
          background: #fff;
          text-indent: 5px;
        }
      }
      .hongdian{
        margin-left: 25px;
      }
      .region {
        .ivu-col-span-6 {
        }
        select {
          width: 100px;
          // margin-right: 20px;
          outline: none;
          option {
            text-align: center;
          }
        }
      }
      .hosAddr {
        margin-left: 140px;
      }
    }
  }
}
.button-upload {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
